<template>
  <div :class="['box-content w-full', appStore.isDeep ? 'deep' : 'light']">
    <div class="box-inner wh-full flex-col">
      <slot />
    </div>
  </div>
</template>
<script setup lang="jsx">
import { useAppStore } from '@/store'
defineOptions({
  name: 'BoxContent',
})
const props = defineProps({
  padding: {
    type: String,
    default: '25px',
  },
})
const appStore = useAppStore()
</script>
<style lang="scss" scoped>
@mixin quadrangle($color, $size, $width) {
  background: linear-gradient(to top, $color, $color) left top no-repeat,
    //上左
    linear-gradient(to right, $color, $color) left top no-repeat,
    //左上
    linear-gradient(to left, $color, $color) right top no-repeat,
    //上右
    linear-gradient(to bottom, $color, $color) right top no-repeat,
    //上右
    linear-gradient(to left, $color, $color) left bottom no-repeat,
    //下左
    linear-gradient(to bottom, $color, $color) left bottom no-repeat,
    //左下
    linear-gradient(to top, $color, $color) right bottom no-repeat,
    //下右
    linear-gradient(to left, $color, $color) right bottom no-repeat; //右下
  background-size: $width $size, $size $width, $width $size, $size $width;
}
.box-content {
  flex: 1;
  &.deep {
    box-sizing: border-box;
    height: 636px;
    background: rgba(49, 152, 228, 0.1);
    @include quadrangle(#4ddef4, 13px, 2px);
    padding: 1px;
    position: relative;
    &::before {
      content: '';
      display: block;
      position: absolute;
      z-index: 0;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      background-image: url(@/assets/images/deep-box-ray.png);
      background-position: center;
      background-size: auto 100%;
      background-repeat: no-repeat;
      height: 70px;
      width: 100%;
      pointer-events: none;
    }
    &::after {
      content: '';
      display: block;
      position: absolute;
      z-index: 0;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%) rotateX(180deg);
      background-image: url(@/assets/images/deep-box-ray.png);
      background-position: center;
      background-size: auto 100%;
      background-repeat: no-repeat;
      height: 70px;
      width: 100%;
      pointer-events: none;
    }
    .box-inner {
      border: 1px solid rgba(49, 152, 227, 0.5);
      padding: v-bind('props.padding');
      background-color: rgba(49, 152, 228, 0.1);
      background-image: url(@/assets/images/deep-box-bg.png);
      background-position: center;
      background-size: auto 100%;
      background-repeat: no-repeat;
    }
  }
}
</style>
